// 组价懒加载:按需加载组件
// 用户不去请求显示,那么该组件不会出现在页面里,这就叫懒加载
import React, { lazy, useState } from "react";
const Home = lazy(() => import("./Home"));
const Product = lazy(() => import("./Product"));
const News = lazy(() => import("./News"));
//动态加载
const syncComponent = (isShow, name, com) => {
  isShow === name && (
    <React.Suspense fallback="芜湖,起飞楼">
      <com.is></com.is>
    </React.Suspense>
  );
};

const App = function () {
  const [isShow, setShow] = useState("Home");
  return (
    <div>
      <nav>
        <button onClick={() => setShow("Home")}>首页</button>
        <button onClick={() => setShow("News")}>新闻</button>
        <button onClick={() => setShow("Product")}>产品</button>
      </nav>
      {isShow === "Home" && <Home key="111"></Home>}

      {syncComponent(isShow, "News", {
        is: News,
      })}
      {syncComponent(isShow, "Product", {
        is: Product,
      })}
      {/* 
      {isShow === "Product" && (
        <React.Suspense fallback="芜湖,起飞楼">
          <Product></Product>
        </React.Suspense>
      )} */}
      {/* {
        [News,Product].map(item=>{
            return <React.Suspense key={item.name} fallback={<p>正在加载</p>}>
                {item}
            </React.Suspense>
        })
    } */}
      {/* <React.Suspense fallback={<p>正在加载中...</p>}>
        <Pro></Pro>
      </React.Suspense>
      <React.Suspense fallback={<p>正在加载中...</p>}>
        <News></News>
      </React.Suspense> */}
    </div>
  );
};

export default App;
